Do you ever wonder what your graphics are going to look like on another computer? Do you spend lots of time transferring graphics to different platforms so that you can verify their quality?
Boy, do we have a filter for you!
The Browser Preview filter shows you how a graphic will look in any browser or platform. Before you save it to a GIF or JPEG file!
The interface is shown below:
 
The following paragraphs describe the interface. More detailed information (and tips on reducing the size of your graphics) are presented in the primer section.
previews
There are two previews. The one on the left is a "before" and the one on the right is an "after". Like those pictures that show people losing weight. The difference here being that the picture probably looks worse after losing a few kilobytes.
The preview on the right (the "browser preview") is affected by the graphics settings (GIF or JPEG) as well as the browser settings (Macintosh or Windows).
Either preview can be dragged to a new location within the current selection.
browser selection
As you probably know there are many different ways a person can view your web page. They might be on a Mac or they might be on a PC. They may have a really hot graphics card or they may be plodding along in 256 colors.
The controls to the right of the browser preview allow you to check many different browser configurations. Without having to leave your Mac or adjust your display settings.
The least obvious controls are those for Dark screen. As a Mac user, you may not be aware that a Windows PC doesn't have gamma correction. Without getting into gory details, this makes your image appear a little darker on the PC.
How much darker? It's anyone's guess .. might be a little or it might be alot. The three radio buttons let you check it out for three hypothetical monitors.
no compression
If you want to check an existing GIF or JPEG graphic, set the preview mode to no compression. This will display the graphic as it would appear in the browser.
If you want to display a GIF file, you will need to switch the image mode to RGB before you can start the filter.
the bar graphs
The two bar graphs show how much the original was compressed. The numbers to the right of the graph show the size of the graphic as a percentage of the original 24-bit data. An estimate of the file size is shown below the bar graph.
When there is a lot of compression, the bars are drawn in green (good thing). If there isn't much compression, the bars are drawn in red (bad thing). The color of the bar changes for different compression values. Yellow is used to indicate a value that falls between good and bad.
If you move the preview to another part of the selection, the bar graphs are reset. If you switch to the other graphic (GIF or JPEG) the graphs will be recalculated.
JPEG controls
When you click on the JPEG radio button, two things happen. First, the original image is compressed and displayed in the Browser window. Then a graph showing the amount of compression is displayed.
The most important setting is the Quality. This set the amount of compression for the preview. By default, the quality settings are the same as those used in Photoshop. The Based on image checkbox examines the data in the image and sets the quality accordingly. This often leads to smaller files.
The lowest value (zero) will give you the smallest graphic. Photoshop defaults to a setting of 8. You can normally get acceptable results with values between 3 and 5.
GIF controls
You can also click on the GIF radio button. The image is compressed and displayed in the browser window. A bar graph is also generated.
The controls for a GIF graphic are:
• Palette
• Colors
• Dither
• Web Safe
The Palette settings allow you to pick the colors that will be used in the graphic. The palette choices are:
• System (Macintosh)
• System (Windows)
• Web
• Black & White
• Adaptive
The first three palettes all use 256 colors and will create an 8-bit GIF file. The state of the Web Safe checkbox is updated to remind you that the Web and Black & White palettes both use the 216 web safe colors.
The Dither checkbox dithers the image using the colors of the current palette. Dithering an image will improve the quality of the graphic at the expense of increased size. Watch the graph and the browser preview as you adjust this control.
When you select the Adaptive palette, you can select any number of Colors. Your colors setting plays a big part in determining how large your file will be. Fewer colors = smaller files. The graph is updated when you change the number of colors so you can see how the number of colors affects the image size. Of course, the browser preview is updated to show you how the colors will look on-screen. Smaller files = less beauty.
It's important to note that the Adaptive palette created by Browser Preview is different than the one created by Photoshop. It does not shift Web Safe colors, even if the Web Safe control is turned off. If you've got a FF33CC in your original image, it will be set as FF33CC in the palette (assuming you have enough colors to do so).
When you are using the adaptive palette, you can also adjust the Web Safe checkbox. The original image is checked to see how many web safe colors are used and the most popular colors are put into the palette. The Wider range checkbox will shift the colors to a more even range of values.
The Wider range control is also used if you aren't using Web Safe colors. When it is selected, the colors are chosen by the intensity at which your eye sees them. Otherwise, the numerical values of the colors are used.
Normally, the colors of the current Photoshop selection are used when the adaptive palette is being created. If you enable the Set preview checkbox, only the colors in the current preview are checked. This is useful for seeing how many colors there are in a small part of the image. The checkbox is reset when you scroll the preview to another part of the image.
apply button
If you are working with GIF compression, you can use the Apply button to apply the current palette to the Photoshop selection.
Why would you want to do this? One word: touch-up
When reducing graphics for the web, there are many times when you'd like to get rid of a couple of stray pixels. If you apply the palette before saving the image, you can clean up these pixels. Make sure to use the eyedropper tool to select colors (so that you stay within the palette.) It's also important to avoid using anti-aliased tools like the brush (use the pencil instead.)
quick save button
A future version of this plug-in will allow you to save the current selection as a GIF or JPEG graphic. Quickly and easily.
The upgraded version of the filter will be free to registered users.
